<template>
	<Layout class="layout">
		<Header class="header">
			<Menu style="flex:1;" mode="horizontal" theme="dark" :active-name="menu" @on-select="selectMenu($event)">
				<div class="logo"></div>
				<div class="nav">
					<Submenu name="sys-manage">
						<template slot="title">
							<Icon type="md-albums" />
							系统管理
						</template>
						<MenuItem name="org">
						<Icon type="logo-codepen" />
						组织管理
						</MenuItem>
						<MenuItem name="user">
						<Icon type="md-contact" />
						用户管理
						</MenuItem>
						<MenuItem name="role_role">
						<Icon type="md-cube"></Icon>
						角色资源
						</MenuItem>
						<MenuItem name="system_dict">
						<Icon type="md-desktop"></Icon>
						其他管理
						</MenuItem>
					</Submenu>
					<Submenu name="asist-manage">
						<template slot="title">
							<Icon type="ios-construct" />
							实用模块
						</template>
						<MenuItem name="log_access">
						<Icon type="ios-paper"></Icon>
						系统日志
						</MenuItem>
						<MenuItem name="sched_log">
						<Icon type="md-timer"></Icon>
						定时调度
						</MenuItem>
						<MenuItem name="rule_definition">
						<Icon type="md-medal"></Icon>
						规则引擎
						</MenuItem>
						<MenuItem name="workflow_deployment">
						<Icon type="md-settings"></Icon>
						工作流程
						</MenuItem>
					</Submenu>
				</div>
			</Menu>
			<Menu mode="horizontal" theme="dark" @on-select="selectMenuT">
				<Submenu name="tenant-manage">
					<template slot="title">
						<Icon type="ios-person" />
						租户管理
					</template>
					<MenuGroup title="租户">
						<MenuItem name="change-pass">修改密码</MenuItem>
						<MenuItem name="logout">注销</MenuItem>
					</MenuGroup>
					<MenuGroup title="公司">
						<MenuItem name="change-company">修改公司信息</MenuItem>
					</MenuGroup>
				</Submenu>
			</Menu>
		</Header>
		<Content class='content'>
			<router-view></router-view>
		</Content>
		<!-- 修改密码对话框 -->
		<Modal v-model="passwordModal" title="修改密码" footer-hide>
			<Form ref="passForm" :model="passInfo" :rules="passRules" :label-width="80">
				<FormItem label="登录名">
					<Input type="text" v-model="passInfo.loginName" placeholder="请输入登录名,可不填"></Input>
				</FormItem>
				<FormItem label="原密码">
					<Input type="password" v-model="passInfo.originPassword" placeholder="请输入原密码"></Input>
				</FormItem>
				<FormItem prop="password" label="新密码">
					<Input type="password" v-model="passInfo.password" placeholder="请输入新的密码"></Input>
				</FormItem>
				<FormItem prop="confirmPassword" label="确认密码">
					<Input type="password" v-model="passInfo.confirmPassword" placeholder="请重新输入新的密码"></Input>
				</FormItem>
				<FormItem>
					<Button type="primary" @click="savePassword">更新</Button>
				</FormItem>
			</Form>
		</Modal>
		<!-- 修改公司名称 -->
		<Modal v-model="changeCompanyModal" title="修改公司信息" footer-hide>
			<Form :model="companyInfo" :label-width="80">
				<FormItem label="公司代码">
					<Input type="text" v-model="companyInfo.orgCode" placeholder="请输入公司代码"></Input>
				</FormItem>
				<FormItem label="公司名称">
					<Input type="text" v-model="companyInfo.orgName" placeholder="请输入公司名称"></Input>
				</FormItem>
				<FormItem label="公司简称">
					<Input type="text" v-model="companyInfo.aliasName" placeholder="请输入公司名称"></Input>
				</FormItem>
				<FormItem>
					<Button type="primary" @click="saveCompany">保存</Button>
				</FormItem>
			</Form>
		</Modal>
	</Layout>
</template>

<script>
	export default {
		components: {},
		data() {
			const validateConfirmPass = (rule, value, callback) => {
				if (!value) {
					callback(new Error('必填'))
				} else {
					if (this.passInfo.password !== this.passInfo.confirmPassword) {
						callback(new Error('两次输入不一致'))
					} else {
						callback()
					}
				}
			};
			return {
				menu: '', // 选中的菜单名称
				passwordModal: false,
				changeCompanyModal: false,
				passInfo: {
					loginName: '',
					originPassword: '',
					password: '',
					confirmPassword: ''
				}, // 密码修改
				companyInfo: {
					orgCode: '',
					orgName: '',
					aliasName: ''
				}, // 公司信息
				passRules: {
					originPassword: [
						{required: true, message: '必填'}
					],
					password: [
						{required: true, message: '必填'}
					],
					confirmPassword: [
						{validator: validateConfirmPass}
					]
				}				
			}
		},
		computed: {},
		watch: {},
		created: function() {},
		mounted: function() {
			if (!this.$utils.isTenant) {
				this.$router.replace({
					name: 'login'
				})
			}
		},
		methods: {
			// 管理菜单
			selectMenu: function(name) {
				this.menu = name
				this.$router.push({
					name: name
				})
			},
			// 租户菜单
			selectMenuT: function(name) {
				if (name == "logout") {
					this.logout()
				} else if (name == "change-company") {
					this.changeCompanyModal = true
					this.$request.get('/admin/sys/org/getCompany', {}, res => {
						let data = res.data || {}
						this.companyInfo.id = data.id
						this.companyInfo.orgCode = data.orgCode
						this.companyInfo.orgName = data.orgName
						this.companyInfo.aliasName = data.aliasName
					}, false, false)
				} else if (name == "change-pass") {
					this.passwordModal = true
				}
			},
			logout: function() {
				this.$Modal.confirm({
					title: '确认注销？',
					content: '',
					onOk: () => {
						this.$request.get('/admin/sys/logout', {}, res => {
							this.$router.replace({name: 'login'})
						}, true, true)
					}
				})
			},
			// 保存公司
			saveCompany: function() {
				this.$request.post('/admin/sys/org/changeTopOrg', 
					this.companyInfo, res => {
						this.changeCompanyModal = false
					}, true, true)
			},
			// 修改密码
			savePassword: function() {
				this.$refs['passForm'].validate(valid => {
					if (valid) {
						this.$request.post('/admin/sys/user/changeTenantPassword',
							this.passInfo, res => {
								this.passwordModal = false
							}, true, true)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.layout {
		height: 100vh;
		overflow: hidden;
		
		.header {
			height:auto;
			display:flex;
			background-color: #00557f;
		}

		.content {
			flex: 1
		}

		.logo {
			width: 100px;
			height: 30px;
			background: url(../../assets/logo.png);
			border-radius: 3px;
			float: left;
			position: relative;
			top: 15px;
			left: 20px;
		}

		.nav {
			margin-left: 200px;
		}
	}
	.ivu-menu-dark {
		background-color: transparent;
	}
</style>
